<template>
  <div class="login-container">
    <m-header title="注册"></m-header>
    <div class="login">
      <div class="login-info">
        <div class="account comm">
          <div class="input-area">
            <input class="user" v-model="username" type="text" placeholder="请输入6-11位且包含英文或数字">
        </div>
        </div>
        <div class="password comm">
          <div class="input-area">
            <input class="pass" v-model="password" :type="[showPwd?'text':'password']" placeholder="请输入6-20位字母数字组合">
          </div>
          <div class="view" :class="{'no': !showPwd}" @click="showPwd=!showPwd"><span class="icon"></span></div>
        </div>
        <div class="phone comm">
          <div class="input-area">
            <input class="user" v-model="mobile" type="text" maxlength="11" placeholder="请输入手机号">
        </div>
        </div>
        <div class="code comm">
          <div class="input-area">
            <input class="pass" v-model="code" type="text" placeholder="请输入验证码">
        </div>
          <div class="codebtn" @click="getCode">
            <span v-if="!showCode">获取验证码</span>
            <span v-else>{{`${second}s`}}</span>
          </div>
        </div>
        <div class="introducer comm">
          <div class="input-area">
            <input class="user" v-model="inviteCode" type="text" placeholder="请输入邀请码（可不填）">
        </div>
        </div>
        <div class="login-btn" @click="handleRegister">注册</div>
        <div class="reg-pass">
          <span class="reg" @click="$router.push({path: '/login'})">立即登录</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  name: 'Register',
  components: {
  },
  data () {
    return {
      showPwd: false,
      showCode: false,
      second: 60,
      username: '',
      password: '',
      mobile: '',
      code: '',
      inviteCode: ''
    };
  },
  methods: {
    ...mapActions({
      getRegister: 'common/getRegister',
      sendSms: 'common/sendSms'
    }),
    handleRegister () {
      if (!this.username) {
        this.$vux.toast.text('请输入用户名');
        return false;
      } else if (this.username.length < 6 || this.username.length > 11) {
        this.$vux.toast.text('请输入6-11位用户名');
        return false;
      } else if (!/^[a-zA-Z]+\w*/ig.test(this.username)) {
        this.$vux.toast.text('用户名必须包含英文开头或数字');
        return false;
      }
      if (!this.password) {
        this.$vux.toast.text('请输入密码');
        return false;
      } else if (this.password.length < 6 || this.password.length > 20) {
        this.$vux.toast.text('请输入6-20位密码');
        return false;
      } else if (!/^[a-zA-Z]+\d+\w*/ig.test(this.password)) {
        this.$vux.toast.text('密码必须字母开头且包含数字或字符');
        return false;
      }
      if (!this.mobile) {
        this.$vux.toast.text('请输入手机号');
        return false;
      } else if (!/^1[3|4|5|6|7|8|9]\d{9}/ig.test(this.mobile)) {
        this.$vux.toast.text('手机号格式不正确');
        return false;
      }
      if (!this.code) {
        this.$vux.toast.text('请输入验证码');
        return false;
      }
      let params = {
        username: this.username,
        password: this.password,
        mobile: this.mobile,
        code: this.code
      }
      if (this.inviteCode) {
        params.invitation_code = this.inviteCode;
      }
      this.getRegister(params).then(res => {
        if (res) {
          this.$router.push({ path: '/login' });
        }
      })
    },
    getCode () {
      if (!this.mobile) {
        this.$vux.toast.text('请输入手机号');
        return false;
      } else if (!/^1[3|4|5|6|7|8|9]\d{9}/ig.test(this.mobile)) {
        this.$vux.toast.text('手机号格式不正确');
        return false;
      }
      if (!this.showCode) {
        this.showCode = true;
        this.second = 60;
        this.countdown();
        this.sendSms({mobile: this.mobile});
      }
    },
    countdown () {
      let interval = setInterval(() => {
        if ((this.second--) <= 1) {
          this.second = 1;
          this.showCode = false;
          clearInterval(interval);
        }
      }, 1000);
    }
  }
};
</script>

<style lang="less" scoped>
  .login-container {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    .login {
      width: 86.67%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 31.33%;
      .comm {
        position: relative;
        width: 100%;
        height: 1rem;
        padding-left: 1.2rem;
        padding-right: 0.5rem;
        margin-bottom: 0.3rem;
        background: #FFFFFF;
        border: 0.02rem solid #D2D2D2;
        border-radius: 1rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        &::before {
          content: '';
          position: absolute;
          left: 0.5rem;
          top: 0.3rem;
          width: 0.44rem;
          height: 0.44rem;
          background-size:100% 100%;
          background-repeat: no-repeat;
        }
        .input-area {
          position: relative;
          display: flex;
          align-items: center;
          width: 100%;
          height: 100%;
          // line-height: 0.5rem;
          // margin-left: 1.2rem;
          // border-left: 0.02rem solid #D2D2D2;
          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0rem;
            width: 0.02rem;
            height: 1rem;
            transform: scaleY(0.5);
            background: #D2D2D2;
          }
        }
        input {
          width: 100%;
          height: 100%;
          line-height: 0.5rem;
          padding: 0.2rem 0.2rem 0.2rem 0.3rem;
          font-size: 0.30rem;
          color: #333333;
          box-sizing: border-box;
          &::-webkit-input-placeholder{
            font-size: 0.28rem;
          }
        }
      }
      .login-info {
        .account {
          &::before {
            background-image: url('../../assets/imgs/login/icon-my@2x.png');
          }
        }
        .password {
          &::before {
            background-image: url('../../assets/imgs/login/icon-lock@2x.png');
          }
          .input-area {
            padding-right: 0.54rem;
          }
          .view {
            position: absolute;
            right: 0.4rem;
            padding: 0.1rem;
            .icon {
              display: block;
              width: 0.44rem;
              height: 0.44rem;
              background-size: 100%;
              background-repeat: no-repeat;
              background-position: center center;
              background-image: url('../../assets/imgs/login/icon-view@2x.png');
            }
            &.no .icon {
              background-image: url('../../assets/imgs/login/icon-noview@2x.png');
            }
          }
        }
        .phone {
          &::before {
            width: 0.3rem;
            height: 0.4rem;
            left: 0.55rem;
            background-image: url('../../assets/imgs/login/icon-phone@2x.png');
          }
        }
        .code {
          &::before {
            background-image: url('../../assets/imgs/login/icon-lock@2x.png');
          }
          .input-area {
            padding-right: 1.6rem;
          }
          .codebtn {
            position: absolute;
            right: 0.4rem;
            padding: 0.1rem;
            color: #D44743;
          }
        }
        .introducer {
          &::before {
            background-image: url('../../assets/imgs/login/icon-introducer@2x.png');
          }
        }
        .login-btn {
          width: 100%;
          height: 1rem;
          line-height: 1rem;
          font-size: 0.34rem;
          color: #FFFFFF;
          text-align: center;
          background: #D44743;
          border-radius: 1rem;
        }
        .reg-pass {
          margin: 0.26rem 0.5rem;
          overflow: hidden;
          span {
            float: right;
            // display: inline-block;
            line-height: 0.4rem;
            font-size: 0.26rem;
            color: #D44743;
            letter-spacing: 0.03rem;
          }
        }
      }
    }
  }
</style>
